/**
 * @description 漏斗
 */

import echarts from "../echart"
import { useEffect, useRef } from 'react';
import useChartResize from "@/hooks/useChartResize";
import { getPieMock } from "../mockData";

function Funnel({ configData, chart }) {
  let { title } = configData
  const chartRef = useRef(null)
  const boxRef = useRef()

  useEffect(() => {

    // 图表配置项
    let themeConfig = chart.funnel

    // 限制数量
    let limitNum = chart.base.funnelNum

    // 基于准备好的dom，初始化echarts实例
    if (!chartRef.current) {
      let myChart = echarts.init(boxRef.current)
      chartRef.current = myChart
    }

    // [1] 获取随机数据
    let yAxisData = getPieMock(limitNum)

    // 漏
    let seriesObj = {
      name: title,
      data: yAxisData,
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      minSize: '0%',
      maxSize: '100%',
      ...themeConfig.series,
    }


    const options = {
      backgroundColor: themeConfig.backgroundColor,
      color: themeConfig.color,
      title: {
        ...themeConfig.title,
        text: title,
      },
      // 图例组件
      legend: themeConfig.legend,
      // 直角坐标系内绘图网格
      grid: themeConfig.grid,
      // 提示框组件
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}',
        ...themeConfig.tooltip
      },
      series: [seriesObj]
    }


    // 绘制图表
    chartRef.current.setOption(options, true);
  }, [chart])

  useChartResize(boxRef, chartRef)

  return (
    <div className='chart-box' ref={boxRef} ></div>
  )
}
export default Funnel